<template>
	<view class="wrapper">
		<!-- #ifndef MP-WEIXIN -->
		<navBar :title="title"></navBar>
		<!-- #endif -->
		<!-- 我的关注 模块 -->
		<view class="mainbox" v-if="title == '我的关注'">
			<u-swipe-action v-for="item in renderList" :key="item.id">
				<u-swipe-action-item :options="options0" @click="delOne(item.beFollowUserId)">
					<view class="blog_item">
						<view class="blog_l blog_l_avatar"><image :src="item.user.avatar"></image></view>
						<view class="blog_r">
							<view class="title">{{ item.user.name }}</view>
							<view class="desc">{{ item.user.desc }}</view>
							<view class="time">
								{{ $u.timeFormat(Number(new Date(item.createdAt)), 'yyyy年mm月dd日 hh:MM:ss') }}关注
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<u-empty mode="list" text="还没有关注任何博主~" v-if="!isLoading && renderList.length == 0"></u-empty>
		</view>
		<!-- 我的博客和我赞过的 模块 -->
		<view class="mainbox" v-if="title == '我的博客' || title == '我赞过的'">
			<u-swipe-action v-if="renderList.length != 0" v-for="item in renderList" :key="item.id">
				<!-- 已删除的点赞博客 -->
				<u-swipe-action-item
					v-if="item.blog"
					:options="title == '我的博客' ? options1 : options2"
					@click="delOne(item.blogId)"
				>
					<view class="blog_item">
						<view class="blog_l">
							<view class="delPic"><u-icon name="trash" size="32" color="#ccc"></u-icon></view>
						</view>
						<view class="blog_r">
							<view class="title delArticle">{{ item.blog }}</view>
							<view class="time">
								{{ $u.timeFormat(Number(new Date(item.createdAt)), 'yyyy年mm月dd日 hh:MM:ss') }}发布
							</view>
						</view>
					</view>
				</u-swipe-action-item>
				<!-- 没有删除的点赞博客 -->
				<u-swipe-action-item
					v-else
					:options="title == '我的博客' ? options1 : options2"
					@click="delOne(item.id)"
				>
					<navigator class="blog_item" :url="`/subpages/detail/detail?blogid=${item.id}`">
						<view class="blog_l"><image :src="item.cover"></image></view>
						<view class="blog_r">
							<view class="title">{{ item.title }}</view>
							<view class="tags">
								<view class="tag" v-for="(tag, idx) in item.BlogClassifies">
									<u-tag
										:text="tag.classifyName"
										borderColor="#9ca8b8"
										size="mini"
										color="#9ca8b8"
										plain
									></u-tag>
								</view>
							</view>
							<view class="hudong">
								<view class="like">
									<u-icon name="thumb-up" color="#9ca8b8" size="16"></u-icon>
									{{ item.like_count }}
								</view>
								<view class="like">
									<u-icon name="chat" color="#9ca8b8" size="16"></u-icon>
									{{ item.comment_count }}
								</view>
								<view class="like">
									<u-icon name="eye" color="#9ca8b8" size="16"></u-icon>
									{{ item.read_count }}
								</view>
							</view>
							<view class="time">
								{{ $u.timeFormat(Number(new Date(item.createdAt)), 'yyyy年mm月dd日 hh:MM:ss') }}发布
							</view>
						</view>
					</navigator>
				</u-swipe-action-item>
			</u-swipe-action>
			<u-empty mode="list" v-if="!isLoading && renderList.length == 0"></u-empty>
		</view>
		<!-- 浏览记录 -->
		<view class="mainbox" v-if="title == '浏览记录'">
			<navigator
				v-if="renderList.length != 0"
				v-for="item in renderList"
				:key="item.id"
				class="blog_item"
				:url="`/subpages/detail/detail?blogid=${item.id}`"
			>
				<view class="blog_l"><image :src="item.cover"></image></view>
				<view class="blog_r">
					<view class="title">{{ item.title }}</view>
					<view class="tags">
						<view class="tag" v-for="(tag, idx) in item.BlogClassifies">
							<u-tag
								:text="tag.classifyName"
								borderColor="#9ca8b8"
								size="mini"
								color="#9ca8b8"
								plain
							></u-tag>
						</view>
					</view>
					<view class="hudong">
						<view class="like">
							<u-icon name="thumb-up" color="#9ca8b8" size="16"></u-icon>
							{{ item.like_count }}
						</view>
						<view class="like">
							<u-icon name="chat" color="#9ca8b8" size="16"></u-icon>
							{{ item.comment_count }}
						</view>
						<view class="like">
							<u-icon name="eye" color="#9ca8b8" size="16"></u-icon>
							{{ item.read_count }}
						</view>
					</view>
					<view class="time">
						{{ $u.timeFormat(Number(new Date(item.createdAt)), 'yyyy年mm月dd日 hh:MM:ss') }}发布
					</view>
				</view>
			</navigator>
			<u-empty mode="list" v-if="!isLoading && renderList.length == 0"></u-empty>
		</view>
		<!-- loading -->
		<u-loadmore
			v-if="title == '我的博客' && renderList.length != 0"
			height="40px"
			marginTop="0"
			marginBottom="0"
			:status="status"
		/>
		<u-loading-page :loading="isLoading"></u-loading-page>
	</view>
</template>

<script>
import { getMyBlogs, getLikedBlogs, getLikedUser, getHistory, deleteBlog, likeBlog, likeUser } from '@/config/api.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			title: '',
			limit: 10,
			// 数据总数
			count: '',
			renderList: [],
			isLoading: true,
			// 是否加载下一页
			isNext: false,
			// 底部上拉加载的状态值
			status: 'loadmore',
			// 左滑出现的按钮字符
			options0: [
				{
					text: '取消关注'
				}
			],
			options1: [
				{
					text: '删除'
				}
			],
			options2: [
				{
					text: '取消点赞'
				}
			]
		};
	},
	onLoad(e) {
		// 根据传递来的路径参数，动态渲染对应的列表数据
		if (e.title == 'myblogs') {
			this.title = '我的博客';
			this.getMyselfBlogs();
		} else if (e.title == 'mylike') {
			this.title = '我赞过的';
			this.getLiked_Blogs();
		} else if (e.title == 'myfocus') {
			this.title = '我的关注';
			this.getLikeUser();
		} else if (e.title == 'myhistory') {
			this.title = '浏览记录';
			this.getHistoryBlogs();
		}
		// #ifdef MP-WEIXIN
		uni.setNavigationBarTitle({
			title: this.title
		});
		// #endif
	},
	// 滚动到底部的生命周期
	onReachBottom() {
		// 正在加载，返回
		if (this.isNext) return;
		// 若没有数据，不执行loading，直接return
		if (this.limit >= this.count) return;
		this.isNext = true;
		// 若还有数据
		this.status = 'loading';
		setTimeout(async () => {
			this.limit += 10;
			if (this.title == '我的博客') {
				await this.getMyselfBlogs(this.limit);
			}
			this.isNext = false;
			if (this.limit >= this.count) {
				this.status = 'nomore';
			} else {
				this.status = 'loadmore';
			}
		}, 300);
	},
	methods: {
		// 获取我的博客
		async getMyselfBlogs(limit) {
			// #ifndef MP-WEIXIN
			const res = await getMyBlogs(limit, this.userInfo.token);
			this.count = res.count; // 数据总数
			this.renderList = res.rows;
			this.isLoading = false;
			console.log(res);
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: 'https://eggblog.bluej.cn/api/blog/getMyBlog',
				method: 'GET',
				data: {
					limit: limit || 10,
					offset: 1,
					projectId: 155
				},
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					console.log(res.data.data);
					this.count = res.data.data.count; // 数据总数
					this.renderList = res.data.data.rows;
					this.isLoading = false;
				}
			});
			// #endif
		},
		// 获取点赞过的博客
		async getLiked_Blogs() {
			// #ifndef MP-WEIXIN
			const res = await getLikedBlogs(this.userInfo.token);
			this.renderList = res.rows.map(ele => {
				if (ele.blog == '该文章已删除') {
					return ele;
				} else {
					return ele.blog;
				}
			});
			this.isLoading = false;
			console.log(this.renderList);
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: 'https://eggblog.bluej.cn/api/user/getLikeBlog',
				method: 'GET',
				data: {},
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					console.log(res.data.data);
					this.renderList = res.data.data.rows.map(ele => {
						if (ele.blog == '该文章已删除') {
							return ele;
						} else {
							return ele.blog;
						}
					});
					this.isLoading = false;
					console.log(this.renderList);
				}
			});
			// #endif
		},
		// 获取我关注的用户
		async getLikeUser() {
			// #ifndef MP-WEIXIN
			const res = await getLikedUser(this.userInfo.token);
			this.renderList = res.rows;
			this.isLoading = false;
			console.log(res);
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: 'https://eggblog.bluej.cn/api/user/getLikeUser',
				method: 'GET',
				data: {},
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					console.log(res.data.data);
					this.renderList = res.data.data.rows;
					this.isLoading = false;
				}
			});
			// #endif
		},
		// 获取浏览历史
		async getHistoryBlogs(limit) {
			// #ifndef MP-WEIXIN
			const res = await getHistory(limit, this.userInfo.token);
			this.renderList = res.rows;
			this.isLoading = false;
			console.log(res);
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: 'https://eggblog.bluej.cn/api/blog/getHistory',
				method: 'GET',
				data: {
					projectId: 155,
					offset: 1,
					limit: limit || 10
				},
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					console.log(res.data.data);
					this.renderList = res.rows;
					this.isLoading = false;
				}
			});
			// #endif
		},
		// 删除博客、取消点赞博客、取消关注博主
		async delOne(id) {
			if (this.title == '我的博客') {
				// 删除博客
				uni.showModal({
					title: '提示',
					content: '确定删除该博客？',
					success: async res => {
						if (res.confirm) {
							// #ifndef MP-WEIXIN
							uni.showLoading();
							await deleteBlog(id, this.userInfo.token);
							uni.hideLoading();
							uni.showToast({
								title: '删除成功',
								success: () => {
									// 删除后重新请求数据
									this.getMyselfBlogs(this.limit);
								}
							});
							// #endif

							// #ifdef MP-WEIXIN
							uni.showLoading();
							uni.request({
								url: 'https://eggblog.bluej.cn/api/blog/deleteBlog',
								method: 'DELETE',
								data: {
									id: id,
									projectId: 155
								},
								header: {
									'x-token': this.userInfo.token
								},
								success: res => {
									console.log(res.data.data);
									uni.hideLoading();
									uni.showToast({
										title: '删除成功',
										success: () => {
											// 删除后重新请求数据
											this.getMyselfBlogs(this.limit);
										}
									});
								}
							});
							// #endif
						}
					}
				});
			} else if (this.title == '我赞过的') {
				try {
					// #ifndef MP-WEIXIN
					uni.showLoading();
					await likeBlog(id, this.userInfo.token);
					uni.hideLoading();
					uni.showToast({
						title: '取消点赞成功',
						success: () => {
							// 删除后重新请求数据
							this.getLiked_Blogs();
						}
					});
					// #endif
					// #ifdef MP-WEIXIN
					uni.showLoading();
					uni.request({
						url: 'https://eggblog.bluej.cn/api/blog/likeBlog',
						method: 'POST',
						data: {
							id: id,
							projectId: 155
						},
						header: {
							'x-token': this.userInfo.token
						},
						success: res => {
							console.log(res.data.data);
							uni.hideLoading();
							uni.showToast({
								title: '取消点赞成功',
								success: () => {
									// 删除后重新请求数据
									this.getLiked_Blogs();
								}
							});
						}
					});
					// #endif
				} catch (err) {
					console.log(err);
					uni.hideLoading();
					uni.showToast({
						title: '取消点赞成功',
						success: () => {
							// 删除后重新请求数据
							this.getLiked_Blogs();
						}
					});
				}
			} else if (this.title == '我的关注') {
				uni.showModal({
					title: '提示',
					content: '确定取消关注该博主？',
					success: async res => {
						if (res.confirm) {
							// #ifndef MP-WEIXIN
							uni.showLoading();
							await likeUser(id, this.userInfo.token);
							uni.hideLoading();
							uni.showToast({
								title: '取关成功',
								success: () => {
									// 删除后重新请求数据
									this.getLikeUser(this.limit);
								}
							});
							// #endif
							// #ifdef MP-WEIXIN
							uni.showLoading();
							uni.request({
								url: 'https://eggblog.bluej.cn/api/user/follow',
								method: 'POST',
								data: {
									id: id,
									projectId: 155
								},
								header: {
									'x-token': this.userInfo.token
								},
								success: res => {
									console.log(res.data.data);
									uni.hideLoading();
									uni.showToast({
										title: '取关成功',
										success: () => {
											// 删除后重新请求数据
											this.getLikeUser(this.limit);
										}
									});
								}
							});
							// #endif
						}
					}
				});
			}
		}
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	height: 100vh;
	background-color: #f5f5f5;
	.mainbox {
		overflow: hidden;
		width: 95%;
		border-radius: 3vw;
		margin: 1.5vh auto 0;
		background-color: #fff;
		box-sizing: border-box;
		.blog_item {
			display: flex;
			padding: 2vw;
			border-bottom: 1px solid #eee;
			.blog_l {
				display: flex;
				align-items: center;
				image {
					display: block;
					width: 28vw;
					height: 24vw;
					border-radius: 2vw;
				}
				// 删除文章的占位盒子
				.delPic {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					width: 28vw;
					height: 24vw;
					border-radius: 2vw;
					border: 1px solid #ccc;
				}
			}
			.blog_l_avatar {
				image {
					width: 20vw;
					height: 20vw;
					border-radius: 50%;
				}
			}
			.blog_r {
				flex: 1;
				padding-left: 1.5vw;
				.title {
					font-size: 4vw;
					font-weight: 700;
					margin-bottom: 0.5vh;
				}
				.delArticle {
					margin-top: 2vh;
				}
				.desc {
					margin-bottom: 0.5vh;
				}
				.tags {
					display: flex;
				}
				.tag {
					width: 10vw;
					margin-right: 1vw;
				}
				.hudong {
					display: flex;
					margin: 0.5vh 0;
					.like {
						display: flex;
						margin-right: 1vw;
						font-size: 3vw;
						color: #666;
					}
				}
				.time {
					font-size: 3.6vw;
					color: #666;
				}
			}
		}
		::v-deep .u-empty {
			padding: 2vh 0;
		}
	}
}
</style>
